<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/static/lib/layui-v2.8.4/css/layui.css}" media="all">
</head>
<body style="padding: 30px">
<div class="layui-form"  lay-filter="form-val">
    <div class="layui-row layui-col-space12">
        <div class="layui-col-md4 layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-user"></i>
                </div>
                <input type="text" lay-verify="required|username" name="username" lay-reqtext="用户名不能为空" placeholder="用户账户"
                       class="layui-input ">
            </div>
        </div>
        <div class="layui-col-md4 layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-username"></i>
                </div>
                <input type="password" lay-verify="required|password" name="password" lay-reqtext="设置密码"
                       placeholder="密码" class="layui-input">
            </div>
        </div>
        <div class="layui-col-md4 layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-username"></i>
                </div>
                <input type="password" name="repass" lay-verify="required|repass" lay-reqtext="确认密码不能为空"
                       placeholder="请再次输入密码" value="" class="layui-input">
            </div>
        </div>
        <div class="layui-col-md4 layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-username"></i>
                </div>
                <input type="text" lay-verify="required|name" name="name" lay-reqtext="用户姓名不能为空"
                       placeholder="用户姓名" class="layui-input">
            </div>
        </div>
        <div class="layui-col-md4 layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-email"></i>
                </div>
                <input type="text" lay-verify="required|email" name="email" lay-reqtext="用户邮箱不能为空"
                       placeholder="邮箱" class="layui-input">
            </div>
        </div>
        <div class="layui-col-md4 layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i>☏</i>
                </div>
                <input type="text" lay-verify="required|phone" name="phone" lay-reqtext="用户手机号不能为空"
                       placeholder="手机号" class="layui-input">
            </div>
        </div>
    </div>
    <input type="hidden" name="id" placeholder="用户ID" class="layui-input">
    <div class="layui-row">
        <div class="layui-col-md12" style="text-align: center;">
            <button class="layui-btn layui-btn-primary" lay-filter="saveAddBtn" lay-submit>添加</button>
        </div>
    </div>
</div>
<script>
    let ctx = '[[${#servletContext.contextPath}]]';
</script>
<script th:src="@{/static/lib/layui-v2.8.4/layui.js}" charset="utf-8"></script>
<script th:src="@{/static/lib/jquery-3.4.1/jquery-3.4.1.min.js}" charset="utf-8"></script>
<script th:src="@{/static/lib/captcha/js/crypto-js.js}" charset="utf-8"></script>
<script th:src="@{/static/lib/captcha/js/ase.js}" charset="utf-8"></script>
<script>
    layui.use(['form'], function () {
        var form = layui.form;
        layer = layui.layer;
        // $ = layui.$;的含义：layui内部使用jQuery，如果页面中没有引入jQuery，layui会自动引入jQuery
        $ = layui.$;
        //     自定义验证规则
        form.verify({
            username: function (value) {
                // 用户名只能是纯中文或纯英文
                if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                    return '用户名不能有特殊字符';
                }
                if (/(^_)|(__)|(_+$)/.test(value)) return '用户名首尾不能出现 _ 下划线';
                if (/^\d+$/.test(value)) return '用户名不能全为数字';
                if (value.length < 2 || value.length > 10) {
                    return '用户名长度为2-10个字符';
                }
            },
            password: function (value) {
                if (value.length < 6 || value.length > 12) {
                    return '密码长度为6-12个字符';
                }
            },
            repass: function (value) {
                //     获取密码框的值
                let password = $("input[name='password']").val();
                if (value !== password) {
                    return '两次输入的密码不一致';
                }
            },
            name: function (value) {
                if (value.length < 2 || value.length > 10) {
                    return '用户姓名长度为2-10个字符';
                }
                //     用户姓名只能为纯中文或纯英文
                if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                    return '用户姓名不能有特殊字符';
                }
                if (/(^_)|(__)|(_+$)/.test(value)) return '用户姓名首尾不能出现 _ 下划线';
                if (/^\d+$/.test(value)) return '用户姓名不能全为数字';
            },
            email: function (value) {
                //     格式：^\d{6,10}@[a-zA-Z]{2,7}\.[a-zA-Z]{2,7}$
                if (!new RegExp("^\\d{6,10}@[a-zA-Z]{2,7}\\.[a-zA-Z]{2,7}$").test(value)) {
                    return '邮箱格式不正确';
                }
            },
            phone: function (value) {
                //     手机号不能少于7位
                if (value.length < 7) {
                    return '手机号格式不正确';
                }
                //     必须是数字
                if (!new RegExp("^[0-9]*$").test(value)) {
                    return '手机号格式不正确';
                }
            }
        });
        //监听提交
        form.on('submit(saveAddBtn)' , function (data) {
            data = data.field;
            console.log(data);
            //     密码加密
            let key = CryptoJS.lib.WordArray.random(16).toString();
            data.key = key;
            data.password = aesEncrypt(data.password, key);
            //     发送异步请求
            fetch(ctx + '/sysUser/add', {
                headers: {
                    'Content-Type': 'application/json'
                },
                method: 'post',
                body: JSON.stringify(data)
            }).then(function (resp) {
                return resp.json();
            }).then(function (json) {
                if (json.code == 200) {
                     layer.alert('添加成功', function () {
                        //     关闭弹窗
                        let index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                        //     刷新父页面
                        parent.location.reload();
                    });
                } else {
                    layer.msg(json.msg, {icon: 2, time: 2000})
                }
            }).catch(function (error) {
                layer.msg(error.msg, {icon: 2, time: 2000})
            });
            return false;
        });
    });

    //失去焦点时验证用户账户是否已存在
    let requestSent = false;
    $('input').blur(function () {
        let username = $(this).val();
        if (username == null || username == '') {
            layer.alert('用户名不能为空');
            return false;
        }
        if (!requestSent) {
            requestSent = true;
            // fetch(ctx + "/sysUser/checkUsername?username = " + username).then(function (resp) {
            //     return resp.json();
            // }).then(function (json) {
            //     if (json.code == 200) {
            //         layer.msg(json.msg, {icon: 1, time: 2000})
            //     } else {
            //         layer.msg(json.msg, { time: 2000})
            //     }
            // }).catch(function (error) {
            //     layer.msg(error.msg, { time: 2000})
            // });
        }
    });

</script>
</body>
</html>